<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload</title>
    <script src="js/require.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../src/css/toolbar.css"/>
    <style type="text/css">>
    .el-upload {

    }

    .process{
        overflow: hidden;
        background-color: #f5f5f5;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    }

    .progress-bar {
        height: 20px;
        line-height: 20px;
        background: #337ab7;
        color: #ffffff;
        float: left;
    }
    </style>
</head>
<body>

<h2>upload2</h2>
<div class="el-upload">
    <div class="el-file">
        <input type="file" class="el-file-input" id="_inputFile" name="inputFile" multiple>
        <label class="el-file-label" for="_inputFile">+</label>
    </div>
    <div id="upload_area_id">
    </div>
    <div class="process">
        <div class="progress-bar" id="progress-bar1" style="width: 0;"></div>
    </div>
</div>

<h2>上传按钮和预览在一起</h2>
<div class="el-upload">
    <div class="el-file">
        <input type="file" class="el-file-input" id="_inputFile3" name="inputFile">
        <label class="el-file-label" for="_inputFile3" id="purview3">+</label>
    </div>
</div>

<script type="text/html" id="img_tpl">
    <div class="img-item img-item-${status}">
        <div class="c-2">
            <a href="${path}" title="文件名：${name}，上传日期：${add_time2}" target="_blank">
                <img src="${path}" alt="${name}" width="60" height="60"/>
            </a>
        </div>
        <div class="c-2 remove">
            <input type="hidden" class="img_id" name="img_ids" value=""/>
            <a href="javascript:void(0);" onclick="img_drop_item(this)" data-id="${id}"
               class="glyphicon glyphicon-remove"></a>
        </div>
    </div>
</script>

<script type="text/html" id="img_tpl3">
    <input type="hidden" class="img_id" name="img_ids" value=""/>
    <img src="${path}" alt="${name}" style="width: 100%; height: 100%; border-radius: 5px; position: absolute; left: 0; top: 0;"/>
</script>

<script type="text/javascript" src="./js/require.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript">
    require(['processLoading', 'upload'], function (process) {
        $('#_inputFile').upload2({
            action: 'upload.json',
            init_url: '',
            init_params: function () {
            },
            success: function (rows) {
            },
            init_complete: function (rows) {
            },
            upload_area_id: 'upload_area_id',
            callback_tpl: 'img_tpl',
            progress_bar_id: 'progress-bar1',
        });

        $('#_inputFile3').upload2({
            action: 'upload.json',
            upload_area_id: 'purview3',
            callback_tpl: 'img_tpl3',
        });
    });
</script>
</body>
</html>